[V0_FILE]typescript:file="lib/questions.ts" isMerged="true" export interface Question { id: number question: string options: string[] correctAnswer: number category: string } export const questions: Question[] = [ { id: 1, question: "¿Qué es la regla 50/30/20 para presupuestos?", options: [ "50% necesidades, 30% deseos, 20% ahorros", "50% ahorros, 30% necesidades, 20% deseos", "50% deseos, 30% ahorros, 20% necesidades", "50% inversiones, 30% gastos, 20% emergencias", ], correctAnswer: 0, category: "Presupuestos", }, { id: 2, question: "¿Cuál es el tamaño ideal de un fondo de emergencia?", options: ["1 mes de gastos", "3-6 meses de gastos", "1 año de gastos", "No es necesario tener uno"], correctAnswer: 1, category: "Ahorro", }, { id: 3, question: "¿Qué significa automatizar tus ahorros?", options: [ "Usar una app para ver tus gastos", "Configurar transferencias automáticas a tu cuenta de ahorros", "Invertir en criptomonedas", "Pagar tus facturas manualmente", ], correctAnswer: 1, category: "Ahorro", }, { id: 4, question: "¿Cuál es el primer paso para crear un presupuesto efectivo?", options: [ "Comprar cosas que necesitas", "Rastrear todos tus ingresos y gastos", "Pedir un préstamo", "Invertir en acciones", ], correctAnswer: 1, category: "Presupuestos", }, { id: 5, question: "¿Qué es una meta financiera SMART?", options: [ "Una meta que suena bien", "Específica, Medible, Alcanzable, Relevante y con Tiempo definido", "Una meta de ahorro pequeña", "Una meta que no requiere planificación", ], correctAnswer: 1, category: "Gestión Financiera", }, { id: 6, question: "¿Por qué es importante rastrear tus gastos diarios?", options: [ "Para impresionar a tus amigos", "Para identificar patrones y áreas donde puedes ahorrar", "No es importante", "Solo para personas ricas", ], correctAnswer: 1, category: "Presupuestos", }, { id: 7, question: "¿Cuál es la diferencia entre una necesidad y un deseo?", options: [ "No hay diferencia", "Las necesidades son esenciales para vivir, los deseos son opcionales", "Los deseos son más importantes", "Las necesidades son más caras", ], correctAnswer: 1, category: "Gestión Financiera", }, { id: 8, question: "¿Qué porcentaje de tus ingresos deberías destinar al ahorro como mínimo?", options: ["5%", "10-20%", "50%", "0% - no es necesario ahorrar"], correctAnswer: 1, category: "Ahorro", }, { id: 9, question: "¿Cómo puede ayudarte Kebo con tu gestión financiera?", options: [ "Solo muestra anuncios", "Automatiza el seguimiento de gastos y te ayuda a crear presupuestos inteligentes", "Te presta dinero", "Invierte tu dinero automáticamente", ], correctAnswer: 1, category: "Kebo App", }, { id: 10, question: "¿Cuál es el beneficio principal de usar una app como Kebo para finanzas?", options: [ "Es gratis", "Centraliza tu información financiera y te da insights en tiempo real", "Te hace rico instantáneamente", "Reemplaza a tu banco", ], correctAnswer: 1, category: "Kebo App", }, ] [V0_FILE]json:file="package.json" isMerged="true" { "dependencies": { "framer-motion": "^11.0.0", "tw-animate-css": "1.4.0", "next": "15.5.4", "react": "19.2.0", "react-dom": "19.2.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.545.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "geist": "1.5.1", "@vercel/analytics": "1.5.0" }, "devDependencies": { "@types/react": "19.2.2", "@types/react-dom": "19.2.1", "@types/node": "24.7.0", "tailwindcss": "4.1.14", "typescript": "5.9.3", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" export const metadata: Metadata = { title: "Test de IQ Financiero | Kebo", description: "Descubre tu nivel de conocimiento financiero con el test de Kebo", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/share-card.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Twitter, Facebook, Linkedin, Link2, Check } from "lucide-react" import { useState } from "react" interface ShareCardProps { score: number badgeTitle: string } export function ShareCard({ score, badgeTitle }: ShareCardProps) { const [copied, setCopied] = useState(false) const shareText = `¡Obtuve ${score}/10 en el Test de IQ Financiero de Kebo y desbloqueé la insignia "${badgeTitle}"!` const shareUrl = typeof window !== "undefined" ? window.location.origin : "" const handleCopyLink = () => { navigator.clipboard.writeText(shareUrl) setCopied(true) setTimeout(() => setCopied(false), 2000) } const shareLinks = [ { name: "Twitter", icon: Twitter, url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`, color: "hover:bg-foreground hover:text-background", }, { name: "Facebook", icon: Facebook, url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, color: "hover:bg-foreground hover:text-background", }, { name: "LinkedIn", icon: Linkedin, url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`, color: "hover:bg-foreground hover:text-background", }, ] return (

Compartir Resultado

{shareLinks.map((social) => ( {social.name} ))}

{shareText}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated to exact Kebo brand colors from official palette */ --background: #fafafa; /* Nano White */ --foreground: #110627; /* Cosmic Black */ --card: #fafafa; --card-foreground: #110627; --popover: #ffffff; --popover-foreground: #110627; /* Kebo Purple as primary */ --primary: #6934d2; /* Kebo Purple */ --primary-foreground: #ffffff; --secondary: #eae0ff; /* Soft Pixel - light purple */ --secondary-foreground: #110627; --muted: #f5f5f5; --muted-foreground: #606a84; /* Silent Gray */ --accent: #9c88ff; /* Lavender Wave */ --accent-foreground: #ffffff; --destructive: #e5484d; /* Alert Red */ --destructive-foreground: #ffffff; --success: #00d9a3; /* Neo Green (assuming correct green value) */ --success-foreground: #ffffff; --warning: #ebac2d; /* Pixel Sun */ --warning-foreground: #110627; --border: rgba(96, 106, 132, 0.15); /* Silent Gray 15% */ --input: rgba(96, 106, 132, 0.25); /* Silent Gray 25% */ --ring: #6934d2; /* Kebo Purple */ --chart-1: #6934d2; --chart-2: #9c88ff; --chart-3: #af8fff; --chart-4: #ebac2d; --chart-5: #00d9a3; --radius: 0rem; /* Sharp corners - no rounding */ --sidebar: #fafafa; --sidebar-foreground: #110627; --sidebar-primary: #6934d2; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #eae0ff; --sidebar-accent-foreground: #110627; --sidebar-border: rgba(96, 106, 132, 0.15); --sidebar-ring: #6934d2; } .dark { --background: #110627; /* Cosmic Black */ --foreground: #fafafa; --card: #200066; /* Quantum Purple */ --card-foreground: #fafafa; --popover: #200066; --popover-foreground: #fafafa; --primary: #9c88ff; /* Lavender Wave */ --primary-foreground: #110627; --secondary: #200066; --secondary-foreground: #fafafa; --muted: rgba(96, 106, 132, 0.25); --muted-foreground: rgba(96, 106, 132, 1); --accent: #6934d2; --accent-foreground: #ffffff; --destructive: #e5484d; --destructive-foreground: #ffffff; --success: #00d9a3; --success-foreground: #ffffff; --warning: #ebac2d; --warning-foreground: #110627; --border: rgba(96, 106, 132, 0.25); --input: rgba(96, 106, 132, 0.5); --ring: #9c88ff; --chart-1: #9c88ff; --chart-2: #af8fff; --chart-3: #6934d2; --chart-4: #ebac2d; --chart-5: #00d9a3; --sidebar: #110627; --sidebar-foreground: #fafafa; --sidebar-primary: #9c88ff; --sidebar-primary-foreground: #110627; --sidebar-accent: #200066; --sidebar-accent-foreground: #fafafa; --sidebar-border: rgba(96, 106, 132, 0.25); --sidebar-ring: #9c88ff; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/badge-display.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import type { LucideIcon } from "lucide-react" interface BadgeInfo { level: string title: string description: string bgColor: string icon: LucideIcon } interface BadgeDisplayProps { badgeInfo: BadgeInfo } export function BadgeDisplay({ badgeInfo }: BadgeDisplayProps) { const Icon = badgeInfo.icon return (

Insignia Desbloqueada

{badgeInfo.title}

) } [V0_FILE]png:file="public/kebo-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KEBO-banner-wnBLYTHW1jv3Xl38ltkV7Togc8rXxf.png" isMerged="true" [V0_FILE]png:file="public/kebo-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kebo-icon-Df3UAom0djO0Ana3R3ETgTkO2Bo8or.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { ArrowRight } from "lucide-react" import Link from "next/link" import Image from "next/image" export default function WelcomePage() { return (

kebo

Ya somos más de 20,000 usuarios Prueba tu IQ Financiero Descubre tu nivel de conocimiento en presupuestos, ahorro y gestión financiera. Valida tus habilidades y aprende a gestionar mejor tu dinero.

Preguntas

Minutos

Niveles

Comenzar Test

Valida tu conocimiento en presupuestos, ahorro y gestión financiera con Kebo

) } [V0_FILE]typescriptreact:file="app/results/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Share2, ArrowRight, Trophy, Target, TrendingUp, Sparkles } from "lucide-react" import Link from "next/link" import Image from "next/image" import { BadgeDisplay } from "@/components/badge-display" import { ShareCard } from "@/components/share-card" interface BadgeInfo { level: string title: string description: string bgColor: string icon: any } const getBadgeInfo = (score: number): BadgeInfo => { if (score >= 10) { return { level: "expert", title: "Experto Kebo", description: "Dominas completamente la gestión financiera. Eres un referente en finanzas personales.", bgColor: "bg-[#6934D2]", // Kebo Purple icon: Trophy, } } else if (score >= 8) { return { level: "pro", title: "Pro en Finanzas", description: "Tienes un excelente conocimiento financiero. Estás en el camino correcto hacia la libertad financiera.", bgColor: "bg-[#9C88FF]", // Lavender Wave icon: TrendingUp, } } else if (score >= 5) { return { level: "manager", title: "Gestor de Dinero", description: "Tienes una base sólida en finanzas. Con un poco más de práctica, serás un experto.", bgColor: "bg-[#AF8FFF]", // Soft Violet icon: Target, } } else { return { level: "starter", title: "Iniciador Financiero", description: "Estás comenzando tu viaje financiero. Kebo te ayudará a mejorar tus conocimientos.", bgColor: "bg-[#00D9A3]", // Neo Green icon: Sparkles, } } } export default function ResultsPage() { const [score, setScore] = useState(0) const [showShare, setShowShare] = useState(false) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const savedScore = localStorage.getItem("testScore") if (savedScore) { setScore(Number.parseInt(savedScore)) } }, []) if (!mounted) { return null } const badgeInfo = getBadgeInfo(score) const percentage = (score / 10) * 100 return (

Tu Puntuación

{score}

/10

Tus Resultados

{badgeInfo.description}

Respondiste correctamente {score} de 10 preguntas

Nivel de conocimiento: {percentage}%

Insignia desbloqueada: {badgeInfo.title}

setShowShare(!showShare)} className="flex-1 bg-secondary text-secondary-foreground border border-border px-6 py-4 font-medium hover:bg-muted transition-colors flex items-center justify-center gap-2" > Compartir Resultado Mejorar con Kebo {showShare && ( )} Volver a intentar

) } [V0_FILE]typescriptreact:file="app/test/page.tsx" isEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useRouter } from "next/navigation" import Image from "next/image" import { QuestionCard } from "@/components/question-card" import { ProgressBar } from "@/components/progress-bar" import { questions } from "@/lib/questions" export default function TestPage() { const router = useRouter() const [currentQuestion, setCurrentQuestion] = useState(0) const [answers, setAnswers] = useState([]) const [selectedAnswer, setSelectedAnswer] = useState(null) const handleAnswer = (answerIndex: number) => { setSelectedAnswer(answerIndex) setTimeout(() => { const newAnswers = [...answers, answerIndex] setAnswers(newAnswers) if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1) setSelectedAnswer(null) } else { const score = newAnswers.reduce((acc, answer, index) => { return acc + (answer === questions[index].correctAnswer ? 1 : 0) }, 0) localStorage.setItem("testScore", score.toString()) localStorage.setItem("testAnswers", JSON.stringify(newAnswers)) router.push("/results") } }, 600) } const progress = ((currentQuestion + 1) / questions.length) * 100 return (

kebo

) } [V0_FILE]typescriptreact:file="components/question-card.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import { Check } from "lucide-react" interface Question { id: number question: string options: string[] correctAnswer: number category: string } interface QuestionCardProps { question: Question questionNumber: number onAnswer: (answerIndex: number) => void selectedAnswer: number | null } export function QuestionCard({ question, questionNumber, onAnswer, selectedAnswer }: QuestionCardProps) { return (

{question.category}

Pregunta {questionNumber} de 10

{question.question}

{question.options.map((option, index) => ( selectedAnswer === null && onAnswer(index)} disabled={selectedAnswer !== null} whileHover={selectedAnswer === null ? { x: 4 } : {}} transition={{ duration: 0.2 }} className={`w-full text-left p-3 md:p-4 border transition-all duration-200 ${ selectedAnswer === index ? "bg-foreground border-foreground text-background" : "bg-card border-border hover:border-foreground/30 text-card-foreground" } ${selectedAnswer !== null && selectedAnswer !== index ? "opacity-40" : ""}`} >

{String.fromCharCode(65 + index)}

{option}

{selectedAnswer === index && ( )}

))}

) } [V0_FILE]typescriptreact:file="components/progress-bar.tsx" isEdit="true" "use client" import { motion } from "framer-motion" interface ProgressBarProps { progress: number current: number total: number } export function ProgressBar({ progress, current, total }: ProgressBarProps) { return (

Progreso

{current} / {total}

) }

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This